<template> 
<div class="module-banner">
 <div class="module-banner2">
      <div class="module-banner2">
         <div class="Rectangle397">
           <img :src="m43"/>
         </div>
      <div v-for="(item,index) in list" :key="index" @click="handleTab(item)" :style="`background-image:url(${tabId==item.id?mb:''})`" class="module-banner-list" :class="{active:tabId==item.id}">
        {{ item.title }}
      </div>
      </div>
       
 </div>
  
 <div class="rightSettings">
 <div class="slide-in-overflow"> 
         <a-input-search
         :class="slideShow?'slide-in':'slide-out'"
            v-model:value="keyWords"
            placeholder="请输入关键字"
            enter-button
            @search="onSearch"
          />
      </div>
   <img :src="k1" alt=""  srcset="" @click="handleSideIn"/>
   <a-dropdown :trigger="['click'] " :placement="placement" >
      <a @click.prevent>
          <img :src="k2"  alt=""  srcset=""/>   
      </a>
       <template #overlay>
            <a-menu>
              <a-menu-item key="0">
                <div>基础设置</div>
              </a-menu-item>
              <a-menu-item key="1">
                <div>渲染效果设置</div>
              </a-menu-item>
              <a-menu-divider />
              <a-menu-item key="2" class="xuanzhongHui">坐标系</a-menu-item>
              <a-menu-item key="3">隐藏坐标系</a-menu-item>
              <a-menu-item key="4">显示坐标系</a-menu-item>
              <a-menu-item key="5" class="xuanzhongHui">投影模式</a-menu-item>
              <a-menu-item key="6">平行投影</a-menu-item>
              <a-menu-item key="7">透视投影</a-menu-item>
              <a-menu-divider />
              <a-menu-item key="8">画布颜色</a-menu-item>
              <a-menu-item key="9">自动保存设置</a-menu-item>
              <a-menu-item key="10">自定义功能区</a-menu-item>
              <a-menu-item key="11">快速访问工具栏 ></a-menu-item>
              <a-menu-item key="12">设置工作目录</a-menu-item>
              <a-menu-item key="13">服务器设置</a-menu-item>
              <a-menu-item key="14">日志信息</a-menu-item>

            </a-menu>
          </template>
   </a-dropdown>
  <img :src="items.url" alt=""  v-for="(items,indexs) in lists " :key="indexs"   @click="handleCount(items)"  :class="countId==items.id ? 'xuanzhongdise':''"/> 
 </div>
</div> 
</template>

<script lang="ts" setup>   
import { ref } from "vue";
// import HeaderSetting from "@/components/svg/HeaderSetting.vue"

import mb from "../../assets/img/mb.png" 
import k1 from "../../assets/img/k1.png" 
import k2 from "../../assets/img/k2.png" 
import k3 from "../../assets/img/k3.png" 
import k4 from "../../assets/img/k4.png" 
import m43 from "../../assets/img/m43.png" 
 console.log(mb);
const emit = defineEmits(['handleType'])
 const tabId = ref(0)
 const keyWords = ref('')
 const slideShow = ref(false)
 const countId =ref(-1);
 const placement =ref('bottomRight');
  
const lists=ref([
  {
    id:1,
    url:k3
  },
  {
    id:2,
    url:k4
  }
]);
 const onSearch = (searchValue: string) => {
  console.log('use value', searchValue);
  console.log('or use this.value', keyWords.value);
};
const handleCount =(item:any)=>{
  countId.value =item.id;
  console.log(item)
}
let list=ref([
  {
    id:0,
    title:"模型" 
  },
  {
    id:1,
    title:"视图" 
  },
  {
    id:2,
    title:"GIS能力" 
  },
  {
    id:3,
    title:"漫游" 
  },
  {
    id:4,
    title:"测量" 
  },
  {
    id:5,
    title:"碰撞" 
  },
  {
    id:6,
    title:"特效" 
  },
  {
    id:7,
    title:"工具" 
  },
  {
    id:8,
    title:"统计" 
  }
])
const handleTab=(item:any)=>{
  console.log(item);
  tabId.value=item.id
  emit('handleType',item)
}
const handleSideIn=()=>{
slideShow.value=!slideShow.value
}
 </script>

<style lang="scss" scoped>
 .module-banner {
   width: 100%;
   height: 42px; 
   display: flex;
   flex-direction: row;
   align-items: center; 
   padding: 4px 0;
   box-shadow: 4px 0px 5.2px rgba(0, 0, 0, 0.04);
 } 
 .module-banner2{ 
   height: 42px; 
   display: flex;
   flex-direction: row;
   align-items: center; 
   padding: 4px 0;
 }
  .Rectangle397 {
  width: 135px;
  height: 42px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 4px 0px 5.2px hsla(0, 0%, 0%, 0.04);
  position: relative;
  margin-right: 10px;
   img{
    width:108px;
    height:43px
   }
 }
  
 .module-banner-list { 
  color: rgba(51, 51, 51, 1);
  font-family: PingFang SC;
  font-size: 20px;
  width: 100px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  
  cursor: pointer;
  background-size: cover;
  background-repeat: no-repeat;
   &:hover{
     background: #e6f8fa;
   }
  
 }
 .active{
  color: white;
 }
 .rightSettings{
  width:100%;
  padding-right: 19px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: end;
  cursor: pointer;
  img{
    width: 16px;
    height: 16px;
    margin-left: 5px;
    &:hover{
      background: #e6f8fa;
    }
  }
 }
 ::v-deep(.ant-input-group-addon .ant-btn-primary){
  background-color:#00aec6
 }
  ::v-deep(.ant-input-search .ant-input:hover){
  border-color: #00aec6;
 }
 .slide-in-overflow{
  overflow: hidden;
 }
 .slide-hide{
  display: none;
 }
 .slide-in {
  display: block;
  animation: slide-in 0.5s forwards;
  opacity: 0;
  transform: translateX(100%);
}
  .slide-out { 
  transition: slide-out  0.5s forwards; 
  transform: translateX(-100%);
    opacity: 1;

}
@keyframes slide-in {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes slide-out {
  to {
    opacity: 0;
    transform: translateX(-100%);
  }
}
.xuanzhongdise{
  width: 22px;
  height: 22px;
  background: rgba(230, 248, 250, 1);

}
.xuanzhongHui{
   color: rgba(102, 102, 102, 0.9);
  font-family: PingFang SC;
  font-size: 12px;
}
</style>
